<template>
  <div class="personaldata">
    <Headershort title="个人资料"/>
    <div class="topitem1">
      <p>完善个人资料可以获得10个成长值哦~</p>
    </div>
    <div class="topitem2 clearfix">
      <ul>
        <li>
          <span class="span1">头像</span>
          <img src="../../images/mainTwo/personaldata/01.png" />
        </li>
        <div class="line"></div>
        <li>
          <span class="span1">昵称</span>
          <span class="span2">{{info.nick}}</span>
        </li>
      </ul>
    </div>
    <div class="topitem2 clearfix">
      <ul>
        <li>
          <span class="span1">性别</span>
          <span class="span2">{{info.gender}}</span>
        </li>
        <div class="line"></div>
        <li>
          <span class="span1">生日</span>
          <span class="span2">生日惊喜年年有</span>
        </li>
        <div class="line"></div>
        <li>
          <span class="span1">肌质</span>
          <span class="span2">油性皮肤</span>
        </li>
        <div class="line"></div>
        <li>
          <span class="span1">兴趣</span>
          <span class="span2">{{info.hobby}}</span>
        </li>
      </ul>
    </div>
    <div class="topitem2 clearfix">
      <ul>
        <li>
          <span class="span1">loveliness帐号</span>
          <span class="span2">{{info.account}}</span>
        </li>
        <div class="line"></div>
        <li>
          <span class="span1">注册时间</span>
          <span class="span2">2017-7-20</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import Headershort from "../../components/changeHeader"

export default {

  name: "personalinfo",
  components: {
    Headershort
  },
  data() {
    return {
        info:{
          
        }
    }
  },
  created(){
      var flag = this.$axios.defaults.baseURL == "http://localhost:3000"
      var url = flag ? "/select" : "/user.json"
      this.$axios.get(url).then((res)=>{
        console.log(res.data)
        this.$data.info=res.data.data[0]
      }).then((error)=>{
        
      })
  }
}
</script>

<style lang='less' scoped>
.topitem1 {
  height: 84/75rem;
  width: 100%;
  padding-top: 160/75rem;

  p {
    font-size: 24/75rem;
    line-height: 84/75rem;
    text-align: center;
    color: #808080;
    // padding-top: 30/75rem;
  }
}

.topitem2 {
  // height: 136/75rem;
  // width: 100%;
  margin-top: 20/75rem;
  box-shadow: 1px 1px 10px #888888;
  li {
    height: 64/75rem;
    width: 100%;
    line-height: 64/75rem;
    .span1 {
      font-size: 28/75rem;
      margin-left: 54/75rem;
      display: inline-block;
      height: 64/75rem;
      float: left;
    }
    img {
      float: right;
      margin-top: 3/75rem;
      margin-right: 54/75rem;
    }
    .span2 {
      font-size: 28/75rem;
      float: right;
      margin-right: 54/75rem;
    }
  }
  .line {
    border-bottom: 1px solid #808080;
  }
}
</style>
